<template>
  <div class="footer">
    <div class="footer-content">
      <div class="footer-icp"><img src="https://cdn.docsmall.com/assets/img/d0289dc.png" alt=""><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51032102000062">联网备案号:51032102000062</a>&nbsp;<a href="https://beian.miit.gov.cn/#/Integrated/index">备案/许可证编号为：蜀ICP备2022027213号-1</a></div>
      <span class="smile"> ｸﾞｯ!(๑•̀ㅂ•́)و✧</span>
      <div>搭建基于Vue+Ts+Koa+centos</div>
      <div class="slogan">记录生活，记录成长 <img src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Fcat.gif" alt=""></div>
      <div>
        <el-popover
          :height="300"
          :width="300"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px; height: 300px;"
          placement="top"
          >
          <template #reference>
            <img class="relation" src="@/assets/img/wechat.jpg" alt="">
          </template>
          <template #default>
            <div class="wx">
              <div class="wx-bc"></div>
            </div>
          </template>
        </el-popover><el-popover
          :width="300"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;height: 300px;"
        >
          <template #reference>
            <img class="relation" src="@/assets/img/email.jpg" alt="">
          </template>
          <template #default>
            <div class="qq">
              <div class="qq-bc"></div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(true)

</script>

<style scoped lang="less">
.footer {
  position: relative;
  width: 100%;
  height: 150px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00a1d6;
  font-size: 14px;
  background-color: #fff;
 .footer-icp {
  display: flex;
  align-items: center;
 }



  .footer-content {
    text-align: center;
    .slogan {
      height: 40px;
      line-height: 40px;
      color:rgb(182, 19, 241);
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    
    .smile {
        position:relative;
        color:rgb(255, 87, 119);
        animation:myfirst 5s infinite alternate;
        border-radius: 8px;
      }
      @keyframes myfirst
      {
      0%   {background:rgb(97, 95, 230); left:0px; top:0px;}
      20%  {background:rgb(237, 237, 109); left:150px; top:0px;}
      40%  {background:rgb(228, 84, 94); left:150px; top:95px;}
      60%  {background:rgb(97, 164, 246); left:-150px; top:95px;}
      80%  {background:rgb(239, 30, 145); left:-150px; top:0px;}
      100% {background:rgb(97, 95, 230); left:0px; top:0px;}
      }
      img {
        width: 20px;
        height: 20px;
        
      }
      .el-avatar {
        margin: 0 10px;
      }
      .relation {
        margin: 0 10px;
      }
      .showRelation {
        width: 5px;
        height: 5px;
      }
  }
}
.wx-bc {
  height: 250px;
  background: url('@/assets/img/微信.jpg') center/cover;
}
.qq-bc {
  height: 250px;
  background: url('@/assets/img/QQ.jpg') center/cover;
}


</style>
